'use client';

import Image from 'next/image';

export default function CardDetail({ card, position }) {
  if (!card) return null;

  const style = position ? {
    position: 'fixed',
    left: `${position.x}px`,
    top: `${position.y}px`,
    transform: 'translate(20px, -50%)',
  } : {};

  return (
    <div 
      style={style}
      className="fixed z-50 bg-white rounded-lg shadow-xl max-w-md w-full overflow-hidden transition-all duration-200 opacity-100">

      <div className="p-4">
        <div className="flex items-center space-x-4 mb-4">
          <div className="flex items-center bg-gray-100 px-2 py-1 rounded">
            <span className="text-sm font-medium text-gray-600">费用:</span>
            <span className="ml-1 text-blue-600 font-bold">{card.cost}</span>
          </div>
          <div className="flex items-center bg-gray-100 px-2 py-1 rounded">
            <span className="text-sm font-medium text-gray-600">战力:</span>
            <span className="ml-1 text-red-600 font-bold">{card.power}</span>
          </div>
        </div>

        <h2 className="text-xl font-bold text-gray-900 mb-4">{card.name}</h2>

        <div className="aspect-square bg-gray-200 rounded-lg overflow-hidden mb-4">
          {card.image ? (
            <Image
              src={card.image}
              alt={`英雄卡牌：${card.name}，战力：${card.power}，费用：${card.cost}`}
              width={300}
              height={300}
              className="w-full h-full object-cover"
            />
          ) : (
            <Image
              src="/pic/1.png"
              alt={`英雄卡牌：${card.name}，战力：${card.power}，费用：${card.cost}`}
              width={300}
              height={300}
              className="w-full h-full object-cover"
            />
          )}
        </div>

        {card.description && (
          <div className="bg-gray-50 p-3 rounded-lg">
            <p className="text-sm text-gray-600">{card.description}</p>
          </div>
        )}

        {card.balance && (
          <div className="text-sm text-gray-600 mt-3">
            拥有数量: <span className="font-medium">{card.balance}</span>
          </div>
        )}
      </div>
    </div>
  );
}